﻿@{
    ViewBag.Title = "首页";
}
@section script{
    <script src="~/Content/FlatLab/js/ga.js"></script>
    <script>
        function viewModel() {
            var self = this;
           
            // 添加
            self.create = function () {
                this.edit(null);
            }
            // 删除
            self.remove = function (user) {
                layer.confirm('确定删除该用户吗？', { icon: 3, title: '提示' }, function (index) {
                    $.ajax({
                        url: "/ManageArea/Home/DelUser/" + user.Id,
                        type: "post",
                        dataType: "json",
                        success: function (json) {
                            layer.msg('删除成功', { icon: 1 });
                            self.users.remove(user);
                            layer.close(index);
                        }
                    })
                });
            }
            // 编辑
            self.edit = function (user) {
                var id = user == null ? '' : user.Id;
                $.get('/ManageArea/Home/EditUser', { id: id }, function (data) {
                    layer.open({
                        type: 1,
                        title: id == '' ? '添加用户' : '编辑用户',
                        shade: 0.2,
                        btn: ['保存', '关闭'],
                        yes: function (index, layerno) {
                            // 绑定编辑用户验证
                            vm.editUser.errors = ko.validation.group(vm.editUser);
                            if (vm.editUser.isValid()) {
                                var ajaxFormOption = {
                                    success: function (res) {
                                        if (res.Code == 0) {
                                            layer.msg('保存成功', { icon: 1 });
                                            init(true); // 重新加载数据
                                            //ko.applyBindings(new viewModel());
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.ErrMsg, { icon: 2 });
                                        }
                                    },
                                    error: function (XMLResponse) {
                                        layer.msg("加载信息失败", { icon: 2 });
                                    }
                                };
                                $("#formUser").ajaxSubmit(ajaxFormOption);
                            } else {
                                vm.editUser.errors.showAllMessages();
                            }
                        },
                        no: function (index, layerno) {
                            layerno.close();
                        },
                        success: function (layero, index) {
                            // 绑定用户信息
                            var um = new userModel(userInfo);
                            vm.editUser = ko.observable(um);
                            var dom = $('.layui-layer-page')[0];
                            // 绑定指定的对象到指定的节点
                            ko.applyBindings(vm.editUser, dom);
                        },
                        area: ['500px', '400px'],
                        content: data
                    });
                });
            };
            //self.Count = ko.computed(function () {
            //    return self.students().length;
            //});
        }

        function userModel(data) {
            var self = this;
            self.Id = ko.observable(data.Id);

            self.UserName = ko.observable(data.UserName).extend({
                required: { params: true, message: "请输入用户名" },
            });

            self.Password = ko.observable().extend({
                minLength: 2,
                maxLength: { params: 30, message: "密码名称最大长度为30个字符" },
                required: {
                    params: true,
                    message: "请输入密码",
                }
            });

            self.RealName = ko.observable(data.RealName).extend({
                required: {
                    params: true,
                    message: "请输入真实姓名"
                }
            });
        }

        function datefomatter(date) {
            var da = new Date(parseInt(date.replace("/Date(", "").replace(")/", "").split("+")[0]));
            return da.getFullYear() + "-" + (da.getMonth() + 1) + "-" + da.getDate() + " " + da.getHours() + ":" +
                da.getSeconds() + ":" + da.getMinutes();
        }

        var vm = new viewModel();
        function init(obj) {
            $.getJSON('/ManageArea/Home/UserList', function (data) {
                vm.users = ko.observableArray(data); // 添加动态监视数组对象

                ko.applyBindings(vm);
            }, 'json');
        }
        init();
    </script>
}
<div class="row">
    <div class="col-sm-12">
        <section class="panel">
            <header class="panel-heading">
                用户列表
                <span class="pull-right">
                    <button type="button" class="btn btn-primary" data-bind="click:$root.create"><i class="icon-plus"></i> 添加用户</button>
                </span>
            </header>
            <table class="table">
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>姓名</th>
                        <th>角色</th>
                        <th>创建时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach:users">
                    <tr>
                        <td data-bind="text: UserName"></td>
                        <td data-bind="text: RealName"></td>
                        <td class="center" data-bind="foreach:$data.Roles">
                            <label data-bind="text:RoleName"></label>
                        </td>
                        <td class="center" data-bind="text: datefomatter(CreateDate)"></td>
                        <td class="center" data-bind="text: Status">
                            <span class="label label-important" data-bind="text: Status"></span>
                        </td>
                        <td class="center">
                            <a class="btn btn-success" href="#">
                                <i class="icon-zoom-in"></i>
                                查看
                            </a>
                            <a class="btn btn-info" href="#" data-bind="click:$root.edit">
                                <i class="icon-edit"></i>
                                编辑
                            </a>
                            <a class="btn btn-danger" href="#" data-bind="click:$root.remove">
                                <i class="icon-trash"></i>
                                删除
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </div>
</div>

@*<h2>
        <a href="/ManageArea/home/edituser">添加User</a><br />
        <a href="/ManageArea/home/FilteResult">Autofac filter过滤器</a>
    </h2>*@
